<template>
    <div class="content">
      <!--搜索表单-->
      <div class="common-seach-wrap">
        <el-form
          size="small"
          :inline="true"
          :model="query"
          class="demo-form-inline"
        >
          <el-form-item label="状态">
            <el-select v-model="query.status">
              <el-option label="所有状态" :value="-1"></el-option>
              <el-option label="待审核" :value="0"></el-option>
              <el-option label="已审核" :value="1"></el-option>
              <el-option label="已驳回" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="query.type">
              <el-option label="所有类型" :value="0"></el-option>
              <el-option label="学习心得" :value="1"></el-option>
              <el-option label="视频教程" :value="2"></el-option>
              <el-option label="文档资料" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getTableInfo"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" row-key="id" height="100%" stripe>
        <el-table-column type="index" label="#" fixed="left" />
        <el-table-column prop="title" label="标题" fixed="left">
            <template #default="scope">
              <el-text>{{ scope.row.title }}</el-text>
              <el-tag size="small" :type="scope.row.type==1?'primary':(scope.row.type==2?'success':'warning')">{{ scope.row.type_text }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="user.real_name" label="作者"/>
        <el-table-column prop="user.mobile" label="联系方式"/>
        <el-table-column prop="staff.department.title" label="所属部门" />
        <el-table-column prop="staff.station.title" label="所属岗位" />
        <el-table-column label="审核结果">
            <template #default="scope">
              <el-tag size="small" :type="scope.row.status==0?'info':(scope.row.status==1?'success':'danger')">{{ scope.row.status_text }}</el-tag>
              <div v-if="scope.row.status>0">审核人：{{ scope.row.admin.user_name??"--" }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="points" sortable label="获得积分" />
        <el-table-column label="操作" fixed="right" width="300">
          <template #default="scope">
            <el-button
              type="primary"
              link
              icon="Edit"
              @click="handleInfo(scope.row.id)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider border-style="none" />
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="curPage"
        :page-size="pageSize"
        layout="total, sizes,prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <Drawer
        ref="infoDrawer"
        @getTable="getTableInfo"
      />
      <LogDrawer ref="logDrawerRef" />
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, defineEmits, reactive, watch } from "vue";
  import { getDepartmentOptionsApi } from "@/api/company/department";
  import Drawer from "./component/dialogInfo.vue";
import { getListAPi } from "@/api/study";
  const infoDrawer = ref<any>(null);
  const query = reactive({
    status: -1,
    type: 0,
  });
  const total = ref(0);
  watch(
    query,
    () => {
      getTableInfo();
    },
    { deep: true }
  );
  const curPage = ref(1);
  const pageSize = ref(20);
  const tableData = ref<any[]>([]);
  onMounted(() => {
    getTableInfo()
  });
  const handleSizeChange = (val: number) => {
    pageSize.value = val;
    getTableInfo();
  };
  const handleCurrentChange = (val: number) => {
    curPage.value = val;
    getTableInfo();
  };
  
  function getTableInfo() {
    getListAPi({
      page: curPage.value,
      page_size: pageSize.value,
      ...query,
    }).then((res) => {
      tableData.value = res.data.data;
      total.value = res.data.total;
    });
  }
  const handleInfo = (id?: number) => {
    infoDrawer.value.dialogOpen(id);
  };
  </script>
  
  <style lang="scss">
  .el-tabs {
    .el-tabs__new-tab {
      width: auto !important;
    }
  }
  .table-box {
    height: calc(100% - 200px);
  }
  </style>
  